<!-- 
  @name: 我的账户
  @date: 2020.1.7
 -->
<template>
	<view class="content">
		<view class="fixed_top">
			<!-- 运营商名 -->
			<view class="opername">
				<view class="nameview" @tap="showPopup = !showPopup">
					<view class="name text_over">{{info.operName}}</view>
					<view class="arrow" :class="showPopup ? 'up' : 'down'"></view>
				</view>
				<view class="isfree" v-show="info.isFree === 1">享受免单权益</view>
			</view>
			
			<!-- 筛选区域 -->
			<view class="_popup" v-show="showPopup" @tap="showPopup = false"></view>
			<view class="operlist" v-show="showPopup">
				<view
					class="item"
					v-for="(item, index) in lists"
					:key="item.operaId"
					@tap="chooseOpe(item, index)">
					<view class="text" :class="item.operaId === info.operaId ? 'sl' : ''">{{item.operName}}</view>
					<view class="icon" v-show="item.operaId === info.operaId"></view>
				</view>
			</view>
			
			<!-- 余额及充值 -->
			<view class="balance">
				<view class="tip">可用余额(元)</view>
				<view
					class="num"
					:class="info.isFree === 1 ? 'n2' : ''"
					@tap="$navigateTo('./balance?operaId=' + info.operaId)">{{info.userBalance}}</view>
				<button class="btn" @tap="$navigateTo('./recharge?operaId=' + info.operaId)" v-if="isAndroid">充值</button>
			</view>
			
			<!-- 搜索及添加区域 -->
			<view class="separate_line"></view>
			<view class="search-add">
				<view class="search">
					<view class="icon"></view>
					<input class="int" confirm-type="search" placeholder="请输入卡号/备注" placeholder-class="phcolor"
						v-model.trim="keyword" @confirm="search" />
				</view>
				<view class="add" @tap="$navigateTo('./cardAdd?operaId=' + info.operaId)">
					<view class="icon"></view>
					<view class="text">添加储值卡</view>
				</view>
			</view>
		</view>
		
		<!-- 储值卡区域 -->
		<view class="cardview" v-if="cardList.length > 0">
			<view
				class="card"
				v-for="(item, index) in cardList"
				:key="item.cardId"
				:class="item.bgClass">
				<view :style="{ opacity: item.cardStatus !== 1 ? '0.5' : '' }">
					<view class="top">NO:{{item.cardNo}}</view>
					<view class="middle">
						<view class="mleft">
							<text class="tip">当前余额(元)</text>
							<text class="num">{{item.cardMoney}}</text>
						</view>
						<view class="mright" @tap="goCardMeg(item, index)">
							<view class="icon"></view>
							<view class="text">管理</view>
						</view>
					</view>
					<view class="bottom text_over">{{item.cardDesc}}</view>
				</view>
				<view class="icon-stop" v-if="item.cardStatus === 2"></view>
				<view class="icon-loca" v-if="item.cardStatus === 3"></view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		<!-- 没有储值卡时 -->
		<view class="no_lists card" v-if="cardList.length === 0">
			<view class="img"></view>
			<view class="tip">尚未绑定储值卡，点击右上方按钮添加吧</view>
		</view>
		
		<!-- 没有运营商列表时 -->
		<view class="no_lists ope" v-if="lists.length === 0">
			<view class="img"></view>
			<text class="tip">暂无数据</text>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //运营商列表
				info: {},  //当前选择的运营商信息
				cardList: [],  //运营商的卡
				cardPage: 1,  //页码
				showPopup: false,  //是否显示筛选
				keyword: '',  //搜索关键字
				isAndroid: false,  //是否为安卓系统
			}
		},
		computed: {
			dtBalance() {
				return this.$store.state.dtBalance;
			}
		},
		watch: {
			dtBalance(newVal, oldVal) {
				if(oldVal !== -1) {
					let index = this.lists.findIndex(item => item.operaId === this.info.operaId);
					this.lists[index].dtBalance = newVal;
					this.info.dtBalance = newVal;
				}
			}
		},
		onLoad() {
			this.getList();
			this.isAndroid = this.$isAndroid();
			uni.$on('userAcc_regpay', this.regpay);
			uni.$on('userAcc_cardAdd', this.cardAdd);
			uni.$on('userAcc_cardChe', this.cardChe);
		},
		onUnload() {
			uni.$off('userAcc_regpay', this.regpay);
			uni.$off('userAcc_cardAdd', this.cardAdd);
			uni.$off('userAcc_cardChe', this.cardChe);
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getCardList();
		},
		onPullDownRefresh() {
			this.reLogin();
		},
		methods: {
			//重新登录
			reLogin() {
				this.keyword = '';
				if(this.info.operaId) {
					this.search();
				} else {
					this.getList();
				}
			},
			//搜索
			search() {
				this.cardList = [];
				this.cardPage = 1;
				this.getCardList();
			},
			//监听充值
			regpay(e) {
				if(this.info.isFree !== 1) {
					let balance = this.$operation(this.info.userBalance, '+', e.total);
					let index = this.lists.findIndex(item => item.operaId === this.info.operaId);
					this.lists[index].userBalance = balance;
					this.info.userBalance = balance;
					this.$store.commit('setDtBalance', this.$operation(this.dtBalance, '+', e.total));
				}
			},
			//监听添加卡
			cardAdd(e) {
				this.keyword = '';
				this.search();
			},
			//监听卡的信息变化
			cardChe(info) {
				let index = this.cardList.findIndex(item => item.cardId === info.cardId);
				this.cardList[index].cardStatus = info.cardStatus;
				this.cardList[index].cardMoney = info.cardMoney;
				this.cardList[index].cardDesc = info.cardDesc;
				this.cardList[index].cardPwd = info.cardPwd;
				this.cardList[index].bgClass = info.bgClass;
			},
			//前往管理卡
			goCardMeg(item, index) {
				this.$store.commit('setTmpData', JSON.stringify(item));
				let url = './cardMeg?operaId=' + this.info.operaId;
				this.$navigateTo(url);
			},
			//选择运营商
			chooseOpe(item, index) {
				this.info = {};
				this.info = JSON.parse(JSON.stringify(item));
				this.showPopup = false;
				this.cardPage = 1;
				this.cardList = [];
				this.getCardList();
			},
			//获取运营商列表
			getList() {
				this.$http({
					url: this.$api.userUrl + 'getfilloperatorlistbyuser'
				}).then(res => {
					let info = JSON.parse(this.$store.state.userinfo);
					info.accountAmount = res.totalAmount;
					this.$store.commit('setUserinfo', JSON.stringify(info));
					if(res.lstAccounts && res.lstAccounts.length > 0) {
						this.info = JSON.parse(JSON.stringify(res.lstAccounts[0]));
						this.$store.commit('setDtBalance', parseFloat(this.info.dtBalance));
						this.lists = res.lstAccounts;
						this.search();
					}
				});
			},
			//获取某个运营商的储值卡列表
			getCardList() {
				this.$http({
					url: this.$api.userUrl + 'getfillusercardpagebyuser',
					data: {
						operaId: this.info.operaId,
						keyword: this.keyword,
						page: this.cardPage,
						rows: this.$tmp.ROWS_RET
					}
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						arr.forEach(item => {
							switch(item.cardStatus) {
								case 1: item.bgClass = 'bg-1'; break;
								case 2: item.bgClass = 'bg-2'; break;
								case 3: item.bgClass = 'bg-3'; break;
							}
						})
						this.cardList = this.cardList.concat(arr);
						this.cardPage += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 运营商名 */
	.opername {
		width: 750rpx;
		height: 90rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.nameview {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			.name {
				font-size: 36rpx;
			}
			.arrow {
				width: 20rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}
			.arrow.up {
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BkGuAeCsDAAAB3KS3BW8112.png');
			}
			.arrow.down {
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BjqGAZCqfAAAB5gloNNc074.png');
			}
		}
		.isfree {
			color: #FF3D3D;
			font-size: 24rpx;
		}
	}
	
	/* 筛选区域 */
	._popup {
		top: 90rpx;
	}
	.operlist {
		position: fixed;
		top: 90rpx;
		left: 0;
		z-index: $z-index-popup-info;
		width: 750rpx;
		height: auto;
		max-height: 450rpx;
		padding: 0 30rpx;
		overflow-y: scroll;
		background-color: $color-white;
		.item {
			width: 100%;
			padding: 35rpx 0;
			border-top: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.text {
				flex: 1;
			}
			.text.sl {
				color: $color-text-primary;
			}
			.icon {
				width: 29rpx;
				height: 19rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16Bns-AQFoQAAACVscWA6g275.png');
			}
		}
	}
	
	/* 余额及充值 */
	.balance {
		width: 750rpx;
		height: 110rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.tip {
			font-size: 24rpx;
		}
		.num {
			flex: 1;
			font-size: 50rpx;
			font-family: $font-family-num;
			margin-left: 30rpx;
		}
		.num.n2 {
			color: $color-nomore;
		}
		.btn {
			width: 110rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: $color-white;
			border-radius: 8rpx;
			background-color: $color-primary;
		}
	}
	
	/* 搜索及添加区域 */
	.search-add {
		width: 750rpx;
		height: 140rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.search {
			width: 430rpx;
			height: 70rpx;
			padding: 0 15rpx;
			background-color: $color-bg;
			border-radius: $border-radius-bm;
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon {
				width: 34rpx;
				height: 34rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BlxCAGnB9AAAFVTRW3TY657.png');
			}
			.int {
				flex: 1;
				margin-left: 15rpx;
			}
		}
		.add {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			.icon {
				width: 37rpx;
				height: 37rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BmGmANKM-AAAEVzCzSAs765.png');
			}
			.text {
				margin-left: 20rpx;
				color: $color-primary;
			}
		}
	}
	
	/* 储值卡区域 */
	.cardview {
		width: 750rpx;
		height: auto;
		margin-top: 340rpx + $spacing-col;
		padding-left: 20rpx;
		.card.bg-1 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BpZaAEDBBAABWp6B4jSM464.png');
		}
		.card.bg-2 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16CmTuAZeF1AABQDvYi-yo493.png');
		}
		.card.bg-3 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BpaSAO27fAABDfFJCh7Q936.png');
		}
		.card {
			width: 708rpx;
			height: 338rpx;
			padding: 0 40rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.top {
				width: 100%;
				font-size: 34rpx;
				color: $color-white;
				font-family: $font-family-num;
			}
			.middle {
				width: 100%;
				margin-top: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.mleft {
					flex: 1;
					color: $color-white;
					.tip {
						font-size: 20rpx;
					}
					.num {
						font-size: 55rpx;
						font-family: $font-family-num;
						margin-left: 30rpx;
					}
				}
				.mright {
					display: flex;
					flex-direction: row;
					align-items: center;
					.icon {
						width: 28rpx;
						height: 29rpx;
						background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BqYWAS2nLAAAERY-ZIUc866.png');
					}
					.text {
						font-size: 32rpx;
						color: $color-white;
						margin-left: 15rpx;
					}
				}
			}
			.bottom {
				margin-top: 40rpx;
				font-size: 30rpx;
				color: $color-white;
			}
			.icon-stop,
			.icon-loca {
				position: absolute;
				top: -3rpx;
				right: -3rpx;
				width: 125rpx;
				height: 125rpx;
			}
			.icon-stop {
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16Cls6AB6CyAABHr9FIbkQ425.png');
			}
			.icon-loca {
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16CluyAB5ZYAABIk99U_hk518.png');
			}
		}
	}
	.no_lists.card .img {
		width: 585rpx;
		height: 308rpx;
		margin-top: 440rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16BswaAPhfzAAEI7HumAOg477.png');
	}
	
	/* 没有运营商列表时 */
	.no_lists.ope {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: $z-index-popup-info;
		background-color: $color-bg;
		.img {
			width: 750rpx;
			height: 396rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky159cFSAOWX2AAGEHrkZsIo116.png');
		}
	}
</style>
